<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>用户管理</title>
        <link rel="stylesheet" href="element-plus/index.css">
        <script src="js/vue.global.js"></script>
        <script src="element-plus/index.full.js"></script>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        nav {
            height: 50px;
            background-color: #00c;
            color: #fff;
            font-size: 16px;
            line-height: 50px;
            padding: 0 20px;
        }
        .content{
            width: calc(100% - 200px);
            height: calc(100vh - 50px);
            border: 1px solid #f00;
            position: absolute;
            top: 50px;
            right: 0;
            padding: 20px;
        }
    </style>
    <body>
        <div id="app">
            <nav>
                <span>后台管理系统</span>
                <span style="float: right;">admin</span>
            </nav>
            <el-menu style="width: 200px;height: calc(100vh - 50px);" default-active="1"
             background-color="#00a" text-color="#fff" active-text-color="#ff0">
                <el-menu-item index="1">
                    <span>用户管理</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <span>系统设置</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <span>日志管理</span>
                </el-menu-item>
            </el-menu>
            <div class="content">
                <el-card>
                    <template #header>
                        <span>用户管理</span>
                        <el-button @click="show=true" type="primary" style="float: right;">添加用户</el-button>
                    </template>
                    <el-input v-model="key" style="width: 300px;">
                        <template #append>
                            <el-button @click="search">搜索</el-button>
                        </template>
                    </el-input>

                    <el-table :data="tableDate" border style="margin: 20px 0;">
                        <el-table-column prop="id" label="id"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="email" label="邮箱"></el-table-column>
                        <el-table-column prop="phone" label="电话"></el-table-column>
                        <el-table-column prop="role" label="角色"></el-table-column>
                        <el-table-column prop="status" label="状态">
                            <template #default="scope">
                                <el-tag v-if="scope.row.status === '启用'" type="success">{{scope.row.status}}</el-tag>
                                <el-tag v-else type="danger">{{scope.row.status}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button @click="show = true,form={...scope.row},current=scope.$index" size="small" type="primary">编辑</el-button>
                                <el-button @click="del()" type="danger" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                    :total="50"
                    layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </el-card>
                <el-dialog v-model="show" title="编辑用户" style="width: 500px;">
                    <el-form ref="userForm" :rules="rules" :model="form">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form ref="userForm" :rules="rules" :model="form">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form ref="userForm" :rules="rules" :model="form">
                        <el-form-item label="电话" prop="phone">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form ref="userForm" :rules="rules" :model="form">
                        <el-form-item label="角色" prop="role">
                            <el-input v-model="form.role"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form ref="userForm" :rules="rules" :model="form">
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="form.status">
                                <el-option value="启用"></el-option>
                                <el-option value="禁用"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <el-button @click="show = false">取消</el-button>
                    <el-button @click="post" type="primary">确定</el-button>
                    </template>
                </el-dialog>
            </div>
        </div>
        <script>
            Vue.createApp({
                data() {
                    return {
                        show:false,
                        key:"",
                        form:{}, //表单数据
                        current:0,
                        rules:{
                            name:[
                                {required:true,message:'请输入姓名',trigger:'blur'}
                            ],
                            email:[
                                {required:true,message:'请输入邮箱',trigger:'blur'}
                            ],
                            phone:[
                                {required:true,message:'请输入电话',trigger:'blur'}
                            ],
                            role:[
                                {required:true,message:'请输入角色',trigger:'blur'}
                            ],
                            status:[
                                {required:true,message:'请输入状态',trigger:'blur'}
                            ]
                        },
                        remarkData:[],
                        tableDate: [
                            {
                                id:1,
                                name:'张三',
                                email:"zhangsan@163.com",
                                phone:"12345678901",
                                role:"管理员",
                                status:"启用",
                            },
                            {
                                id:2,
                                name:'李四',
                                email:"lisi@163.com",
                                phone:"12345678901",
                                role:"主任",
                                status:"启用",
                            },
                            {
                                id:3,
                                name:'王五',
                                email:"wangwu@163.com",
                                phone:"12345678901",
                                role:"员工",
                                status:"启用",
                            }
                            
                        ]
                    }
                },
                created(){  //初始化完成
                    this.remark()
                },
                methods:{
                    remark(){  //备份
                        this.remarkData=JSON.parse(JSON.stringify(this.tableDate))
                    },
                    search(){
                        this.tableDate = this.remarkData.filter(item =>{
                           return item.name.indexOf(this.key) >= 0 ||item.phone.indexOf(this.key) >= 0
                        })
                    },
                    del(i){
                        this.$confirm("确认删除该用户?","提示",{
                            type:"warning",
                            confirmButtonText:"确定",
                            cancelButtonText:"取消"
                            }).then(()=>{
                                this.tableDate.splice(i,1)
                                this.remark
                        })
                    },
                    post(){
                        this.$refs.userForm.validate(res =>{
                        if(res){
                            if(!this.form.id){
                                this.form.id = this.tableDate.length+1
                                this.tableDate.push({...this.form})
                                this.$message.success("添加成功")
                            }else{
                                this.tableDate[this.current] = {...this.form}
                                this.$message.success("修改成功")
                            }
                            this.form = {}
                            this.current = 0
                            this.show = false
                            this.remark()
                        }
                    })
                    }
                }
            }).use(ElementPlus).mount('#app')
        </script>
    </body>
</html>